<!-- UniversalLayout.vue - 万能布局组件（集成版） -->
<template>
  <div class="universal-layout" :class="layoutClasses">
    
    <!-- 🎯 移动端遮罩（抽屉打开时） -->
    <div
      v-if="isMobile && mobileDrawerVisible"
      class="mobile-drawer-mask"
      @click="toggleSidebar"
    />
    
    <!-- 🎯 全局侧边栏 -->
    <!-- 调试：{{ shouldShowSider }} -->
    <GlobalSider
      v-if="shouldShowSider"
      v-bind="siderProps"
      :class="siderClasses"
      :style="siderStyles"
    />
    
    <!-- 🎯 主内容区域 -->
    <main class="layout-main" :style="mainStyles">
      
      <!-- 🎯 全局头部 -->
      <GlobalHeader
        v-if="headerProps"
        v-bind="headerProps"
        :style="headerStyles"
      />
      
          <!-- 🎯 全局标签页 -->
          <GlobalTab v-if="layoutSetting.showTabs" />
      
      <!-- 🎯 全局内容 -->
      <GlobalContent :show-padding="true" />
      
      <!-- 🎯 全局页脚 -->
      <!-- <GlobalFooter v-if="layoutSetting.showFooter" /> -->
      
    </main>
    
    <!-- 🎯 全局菜单系统 -->
    <!-- 🎯 动态菜单（从后端获取） -->
    <GlobalMenu :use-dynamic="true" />
    
    <!-- 🎯 主题设置抽屉 -->
    <ThemeDrawer />
    
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useLayoutManage } from './layoutManage.js'
import { useDevice } from '@/composables/useDevice.js'
import { useTheme } from '@/composables/useTheme.js'

// 导入所有布局组件
import GlobalHeader from './components/global-header/index.vue'
import GlobalSider from './components/global-sider/index.vue'
import GlobalMenu from './components/global-menu/index.vue'
import GlobalTab from './components/global-tab/index.vue'
import GlobalContent from './components/global-content/index.vue'
// import GlobalFooter from './components/global-footer/index.vue'
import ThemeDrawer from './components/theme-drawer/index.vue'

// 🎯 布局管理
const {
  layoutSetting,
  mobileDrawerVisible,
  currentLayoutConfig,
  actualLayoutMode,
  headerProps,
  siderProps,
  layoutClasses: layoutManagerClasses,
  toggleSidebar,
  childLevelMenus  // 🎯 获取子菜单数据（用于混合布局动态宽度计算）
} = useLayoutManage()

const { isMobile, screenType } = useDevice()
const { isDark } = useTheme()

// 🎯 计算属性

// 最终的布局样式类
const layoutClasses = computed(() => [
  ...layoutManagerClasses.value,
  'layout-container',
  {
    'layout-ready': true  // 标记布局已准备就绪
  }
])

// 是否显示侧边栏（水平混合布局无子菜单时完全隐藏）
const shouldShowSider = computed(() => {
  // 🎯 直接从配置读取，避免 siderProps computed 的响应性问题
  const siderConfig = currentLayoutConfig.value.sider
  
  console.log('🔍 [UniversalLayout] shouldShowSider 计算中...', {
    siderConfigVisible: siderConfig?.visible,
    layoutMode: actualLayoutMode.value,
    childCount: childLevelMenus.value?.length || 0,
    siderConfig: siderConfig
  })
  
  // 🎯 只有水平混合布局才根据子菜单决定是否显示
  if (actualLayoutMode.value === 'horizontal-mix') {
    const show = childLevelMenus.value.length > 0
    console.log('🎯 [UniversalLayout] shouldShowSider (horizontal-mix):', {
      show,
      childCount: childLevelMenus.value.length
    })
    return show
  }
  
  // 🎯 其他布局：根据配置决定
  const show = siderConfig && siderConfig.visible !== false
  console.log('🎯 [UniversalLayout] shouldShowSider (其他布局):', {
    show,
    layoutMode: actualLayoutMode.value
  })
  
  return show
})

// 监听 shouldShowSider 变化
watch(shouldShowSider, (newVal) => {
  console.log('🔄 [UniversalLayout] shouldShowSider 变化:', newVal)
}, { immediate: true })

// 侧边栏样式类
const siderClasses = computed(() => [
  'global-sider-wrapper',
  {
    'sider-mobile-visible': isMobile.value && mobileDrawerVisible.value
  }
])

// 侧边栏动态样式（参考 soybean base-layout line 70-102）
const siderStyles = computed(() => {
  const styles = {}
  
  if (isMobile.value) {
    // 🎯 移动端：抽屉效果
    styles.transform = mobileDrawerVisible.value ? 'translateX(0)' : 'translateX(-100%)'
    styles.position = 'fixed'
    styles.left = '0'
    styles.top = '0'
    styles.height = '100vh'
    styles.zIndex = 2000
    styles.width = '280px'
  } else if (actualLayoutMode.value === 'vertical-mix') {
    // 🎯 垂直混合：80px（主侧边栏）+ 有子菜单时 200px（子侧边栏）
    const mixWidth = 80  // 主侧边栏固定宽度
    const mixChildMenuWidth = 200  // 子侧边栏宽度
    const hasChildMenus = childLevelMenus.value.length > 0
    
    let width = mixWidth
    if (hasChildMenus) {
      width += mixChildMenuWidth
    }
    
    styles.width = `${width}px`
    styles.borderRight = '1px solid var(--el-border-color-light)'
    styles.transition = 'width 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
    
    console.log('🔍 [UniversalLayout] vertical-mix 侧边栏宽度:', {
      totalWidth: width,
      hasChildMenus,
      childCount: childLevelMenus.value.length
    })
  } else if (actualLayoutMode.value === 'horizontal-mix') {
    // 🎯 水平混合布局：固定 200px（v-if 已处理隐藏逻辑）
    styles.width = '200px'
    styles.background = 'transparent'  // 移除默认背景，由内部容器控制
    styles.borderRight = 'none'  // 移除默认边框
    styles.padding = '0'  // 移除内边距
    styles.transition = 'width 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
  } else {
    // 🎯 垂直布局：根据折叠状态设置宽度
    const sidebarWidth = siderProps.collapsed ? siderProps.collapsedWidth : siderProps.width
    styles.width = `${sidebarWidth}px`
    styles.position = 'relative'
    styles.transition = 'width 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
  }
  
  return styles
})

// 头部样式
const headerStyles = computed(() => {
  const styles = {
    zIndex: 1000
  }
  
  // 🎯 水平混合布局头部固定
  if (actualLayoutMode.value === 'horizontal-mix') {
    styles.position = 'fixed'
    styles.top = '0'
    styles.left = '0'
    styles.right = '0'
  }
  
  return styles
})

// 主内容区样式
const mainStyles = computed(() => {
  const styles = {}
  
  // 🎯 根据布局模式计算边距
  if (actualLayoutMode.value === 'vertical' && siderProps.visible) {
    const sidebarWidth = siderProps.collapsed ? siderProps.collapsedWidth : siderProps.width
    styles.marginLeft = isMobile.value ? '0' : `${sidebarWidth}px`
    styles.transition = 'margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
  } else if (actualLayoutMode.value === 'vertical-mix' && siderProps.visible) {
    // 垂直混合：80px + 有子菜单时 200px
    const mixWidth = 80
    const mixChildMenuWidth = 200
    const hasChildMenus = childLevelMenus.value.length > 0
    
    let marginLeft = mixWidth
    if (hasChildMenus) {
      marginLeft += mixChildMenuWidth
    }
    
    styles.marginLeft = isMobile.value ? '0' : `${marginLeft}px`
    styles.transition = 'margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
  } else if (actualLayoutMode.value === 'horizontal-mix') {
    // 水平混合：固定定位，需要设置 left 和 width
    const siderWidth = shouldShowSider.value ? 200 : 0
    styles.left = `${siderWidth}px`
    styles.width = `calc(100vw - ${siderWidth}px)`
    styles.transition = 'left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
  }
  
  // 🎯 移动端重置边距
  if (isMobile.value) {
    styles.marginLeft = '0'
  }
  
  return styles
})
</script>

<style lang="scss" scoped>
.universal-layout {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  
  // 🎯 布局模式特定样式
  &.layout-vertical {
    flex-direction: row;
  }
  
  &.layout-horizontal {
    flex-direction: column;
    
    .layout-main {
      flex-direction: column;
    }
  }
  
  &.layout-vertical-mix {
    flex-direction: row;
    
    // ✅ 垂直混合布局的特殊定位
    .global-sider {
      position: relative;
      display: flex;
      flex-direction: row; // 水平排列主侧边栏和子侧边栏
      width: 280px; // 总宽度 = 80px + 200px
    }
  }
  
  // ✅ 修复：水平混合布局的特殊CSS
  &.layout-horizontal-mix {
    flex-direction: column;
    position: relative;
    
    // ✅ 头部固定定位
    .global-header {
      position: fixed !important;
      top: 0;
      left: 0;
      width: 100vw !important;
      z-index: 1000;
      height: 64px;
    }
    
    // ✅ 侧边栏固定定位（从头部下方开始）
    .global-sider {
      position: fixed !important;
      top: 64px !important;
      left: 0 !important;
      height: calc(100vh - 64px) !important;
      z-index: 999;
    }
    
    // ✅ 主内容区固定定位（根据侧边栏动态调整）
    .layout-main {
      position: fixed !important;
      top: 64px !important;
      height: calc(100vh - 64px) !important;
      // left 和 width 由 mainStyles 动态控制
    }
  }
  
  // 🎯 动画效果（默认启用，除非用户关闭）
  // 注意：不要使用 transition: all，会导致性能问题
  &.layout-animation {
    // 动画已在各组件中单独定义，这里只做标记
  }
  
  // 🎯 设备类型样式
  &.layout-mobile {
    .layout-main {
      margin-left: 0 !important;
    }
  }
  
  // 🎯 深色模式样式
  &.layout-dark {
    background: var(--el-bg-color-darker);
  }
}

// 🎯 移动端遮罩
.mobile-drawer-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1999;
  backdrop-filter: blur(2px);
}

// 🎯 侧边栏包装器（过渡效果在 transition.css 中统一定义）
.global-sider-wrapper {
  &.sider-mobile-visible {
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
  }
}

// 🎯 主内容区（过渡效果在 transition.css 中统一定义）
.layout-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  background: var(--el-bg-color-page);
}

// 🎯 布局准备就绪标记
.layout-ready {
  opacity: 1;
  
  // 🎯 可以添加进入动画
  animation: layoutFadeIn 0.5s ease-out;
}

@keyframes layoutFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 🎯 为 Teleport 目标提供ID
:deep(#header-menu-container) {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
}

:deep(#sider-menu-container-primary) {
  flex: 1;
  overflow: hidden;
}

:deep(#sider-menu-container-sub) {
  flex: 1;
  overflow: hidden;
}

:deep(#sub-sider-menu-container) {
  height: 100%;
  overflow: hidden;
}
</style>